<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div id="box">
        我是一个节点
    </div> -->

    <!-- <div id="box" class="warp">
        我是一个节点
        <span>
            --我是span
        </span>
    </div> -->

    <script>
        // let box = document.getElementById("box")
        // console.dir(box)


        let vDom = {
            tagName: "div",
            props: {
                id: "box",
                class: "warp"
            },
            children: [
                "我是一个节点",
                {
                    tagName: "span",
                    props: {},
                    children: [
                        "--我是span"
                    ]
                }
            ]
        }

        
        // 什么是虚拟dom?
        // 用js对象来描述真实的dom结构
        // let vDom = {
        //     // 标签名称
        //     typeName: "div",
        //     // 属性
        //     props: {
        //         id: "box"
        //     },
        //     // 子节点
        //     children: [
        //         "我是一个节点"
        //     ]
        // }


        
        // console.dir(vDom)

    </script>
</body>
</html>